<template>
  <div class="container  buryingConfig" style="width:99%;margin-top:-25px;"> 
    <!-- 查询条件 -->
    <div class="query-box">
        <!-- 查询条件 -->
    <div class="query-box">
      <el-form :model="queryBox" status-icon ref="queryBox">
        <div class="schoolBoxCont">
          <div class="schoolBoxContItem">
            <el-form-item label prop="phone">
              <div class="schoolBoxContItemTitle">
                埋点ID
              </div>
              <div class="schoolBoxContItemInput">
                <el-input
                  clearable
                  v-model="queryBox.bid"
                  placeholder="埋点ID"
                >
                </el-input>
              </div>
            </el-form-item>
          </div>
        
          <div class="schoolBoxContItem">
            <el-form-item label prop="name">
              <div class="schoolBoxContItemTitle">
                url
              </div>
              <div class="schoolBoxContItemInput">
                <el-input
                  clearable
                  v-model="queryBox.url"
                  placeholder="url"
                >
                </el-input>
              </div>
            </el-form-item>
          </div>
          <div class="schoolBoxContItem">
            <el-form-item label prop="name">
              <div class="schoolBoxContItemTitle">
                埋点名称
              </div>
              <div class="schoolBoxContItemInput">
                <el-input
                  clearable
                  v-model="queryBox.bName"
                  placeholder="埋点名称"
                >
                </el-input>
              </div>
            </el-form-item>
          </div>
          <div class="schoolBoxContItem">
            <el-form-item label prop="name">
              <div class="schoolBoxContItemTitle">
                平台属性
              </div>
              <div class="schoolBoxContItemInput">
                <el-select
                  v-model="queryBox.platform"
                  clearable
                  filterable>
                  <el-option
                    v-for="item in platform_options"
                    :key="item.key"
                    :label="item.value"
                    :value="item.key"
                  >
                  </el-option>
                </el-select>
              </div>
            </el-form-item>
          </div>
          
          <div class="schoolBoxContItem">
            <el-form-item label prop="name">
              <div class="schoolBoxContItemTitle">
                时间
              </div>
              <div class="schoolBoxContItemInput schoolBoxContItemInput2">
                <el-date-picker
                  v-model="value2"
                  type="datetimerange"
                  :picker-options="pickerOptions"
                  range-separator="至"
                  start-placeholder="开始日期"
                  end-placeholder="结束日期"
                  value-format="yyyy-MM-dd 00:00:00"
                  format="yyyy-MM-dd 00:00:00"
                  align="right">
                </el-date-picker>
              </div>
            </el-form-item>
          </div>
        </div>
      </el-form>
    </div>
      <div class="from-btns">
        <kt-button
          :label="$t('action.reset')"
          perms="true"
          type="primary"
          @click="reset('queryBox')"
        />
        <kt-button
          :label="$t('action.search')"
          perms="true"
          type="primary"
          @click="search"
        />
      </div>
    </div>
    <div class="add-btns fl">
      <!-- 新增配置 -->
      <kt-button
        :label="$t('新增配置')"
        perms="DataCollection:BuryingConfig:add"
        type="primary"
        @click="handleAdd"
      />
      <kt-button
        :label="$t('导出配置')"
        perms="DataCollection:BuryingConfig:reloadCache"
        type="primary"
        @click="exportData"
      />
      <kt-button
        :label="$t('加载缓存')"
        perms="DataCollection:BuryingConfig:reloadCache"
        type="primary"
        :loading='reloadCheLoading'
        @click="reloadCache"
      />
    </div>
    <!--表格内容栏-->
    <div class="btn">
      <Crm-table
        :showOperation='false'
        BuryingConfig
        class="buryingConfigTable"
        permsEdit="DataCollection:BuryingConfig:edit"
        permsDelete="DataCollection:BuryingConfig:delete"
        :data="pageResult"
        :columns="columns"
        :loading='loading'
        @findPage="findPage"
        @handleEdit='handleEdit'
        @handleDeleteDic='handleDeleteDic'
      ></Crm-table>
    </div>
  <!--新增编辑界面-->
    <el-dialog
      :title="operation?'编辑配置':'新增配置'"
      width="40%"
      :visible.sync="dialogVisible"
      :close-on-click-modal="false"
      :before-close="dialogClose"
      @close="buryingConfigDialogClose"
      class="buryingConfigDialog"
    >
      <el-form
        :model="buryingConfig"
        :rules="buryingConfigRule"
        label-width="80px"
        ref="buryingConfig"
        :size="size"
        label-position="right"
      >
        <el-row>
          <el-col :span="24">
            <el-col :span="5">
              <span style="display:inline-block;margin-top:7%">埋点ID:</span>
            </el-col>
            <el-col :span="19">
              <el-form-item prop="id">
                <el-input :disabled="true"  v-model="buryingConfig.id" placeholder="埋点ID" auto-complete="off"></el-input>
              </el-form-item>
            </el-col>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="24">
            <el-col :span="5">
              <span style="display:inline-block;margin-top:7%">埋点名称:</span>
            </el-col>
            <el-col :span="19">
              <el-form-item prop='buryingName'>
                <el-input v-model="buryingConfig.buryingName" placeholder="请输入埋点名称" auto-complete="off" ></el-input>
              </el-form-item>
            </el-col>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="24">
            <el-col :span="5">
              <span style="display:inline-block;margin-top:7%">是否异步埋点:</span>
            </el-col>
            <el-col :span="19">
              <el-form-item>
                <el-select style="width:100%" filterable clearable v-model="buryingConfig.pageClassOption">
                  <el-option
                    v-for="item in pageClass_options"
                    :key="item.key"
                    :label="item.value"
                    :value="item.key"
                  ></el-option>
                </el-select>
              </el-form-item>
            </el-col>
          </el-col>
        </el-row>
        <el-row v-if='buryingConfig.pageClassOption==1'>
          <el-col :span="24">
            <el-col :span="5">
              <span style="display:inline-block;margin-top:7%">页面绑定class:</span>
            </el-col>
            <el-col :span="19">
              <el-form-item prop='pageClass'>
                <el-input v-model="buryingConfig.pageClass" placeholder="请输入页面class" auto-complete="off" ></el-input>
              </el-form-item>
            </el-col>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="24">
            <el-col :span="5">
              <span style="display:inline-block;margin-top:7%">平台属性:</span>
            </el-col>
            <el-col :span="19">
              <el-form-item prop='platform'>
                <el-select style="width:100%" filterable clearable v-model="buryingConfig.platform">
                  <el-option
                    v-for="item in platform_options"
                    :key="item.key"
                    :label="item.value"
                    :value="item.key"
                  ></el-option>
                </el-select>
              </el-form-item>
            </el-col>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="24">
            <el-col :span="5">
              <span style="display:inline-block;margin-top:7%">描述:</span>
            </el-col>
            <el-col :span="19">
              <el-form-item prop='description'>
                <el-input v-model="buryingConfig.description"  type="textarea" placeholder="请输入描述" auto-complete="off"></el-input>
              </el-form-item>
            </el-col>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="24">
            <el-col :span="5">
              <span style="display:inline-block;margin-top:7%">所属页面:</span>
            </el-col>
            <el-col :span="19">
              <el-form-item prop='belongUrl'>
                <el-input v-model="buryingConfig.belongUrl" placeholder="请输入所属页面" auto-complete="off"></el-input>
              </el-form-item>
            </el-col>
          </el-col>
        </el-row>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button :size="size" @click.native="dialogClose">{{$t('action.cancel')}}</el-button>
        <el-button
          :size="size"
          type="primary"
          v-if='!operation'
          @click.native="addBuryingConfig('buryingConfig')"
          :loading="editLoading"
        >提交</el-button>
        <el-button
          :size="size"
          type="primary"
          v-if='operation'
          @click.native="eidtBuryingConfig('buryingConfig')"
          :loading="editLoading"
        >提交</el-button>
      </div>
    </el-dialog>
  </div>
</template>
<script>
import PopupTreeInput from "@/components/PopupTreeInput";
import KtButton from "@/views/Core/KtButton";
import CrmTable from "@/views/Core/CrmTable";
import CrmSwitch from "@/views/Core/CrmSwitch";
import { regionDataPlus } from "element-china-area-data";
import { CodeToText } from "element-china-area-data";
import { baseUrl } from "@/utils/global";
import axios from "axios";
import Cookies from "js-cookie";
export default {
  name: "PageStatistics",
  components: {
    PopupTreeInput,
    CrmTable,
    KtButton,
    CrmSwitch
  },
  data() {
    return {
      size: "small",
      student_data_from_options: [
        {
          label: " ",
          key: " "
        }
      ],
      loading:false,
      columns: [
        { type: "index", label: "序号", minWidth: 50 },
        { prop: "belongUrl", label: "所属页面", minWidth: 220 },
        { prop: "buryingName", label: "埋点名称", minWidth: 120 },
        { prop: "description", label: "描述", minWidth: 120 },
        { prop: "platformStr", label: "平台属性", minWidth: 120 },
        
        { prop: "id", label: "埋点ID", minWidth: 120 },
        { prop: "createDate", label: "创建时间", minWidth: 120 },      
      ],
      pageRequest: { pageNum: 1, pageSize: 10 },
      pageResult: {
        content: []
      },
      pickerOptions: {
        shortcuts: [
          {
            text: "今天",
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime());
              picker.$emit("pick", [start, end]);
            }
          },
          {
            text: "昨天",
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime()- 3600 * 1000 * 24 );
              picker.$emit("pick", [start, end]);
            }
          },
          {
            text: "最近一周",
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);
              picker.$emit("pick", [start, end]);
            }
          },
          {
            text: "最近一个月",
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);
              picker.$emit("pick", [start, end]);
            }
          },
          {
            text: "最近三个月",
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 90);
              picker.$emit("pick", [start, end]);
            }
          }
        ]
      },
      value1: "",
      value2: "",
      value3: "",
      queryBox: {
        startDate:'',
        endDate:'',
        url:'',
        bid:'',
        buryName:'',
        bName:'',
        id:'',
        platform:''
      },
      buryingConfigRule: {
          belongUrl: [
            { required: true, message: '请填写所属页面', trigger: 'blur' }
          ],
          description: [
            { required: true, message: '请填写描述', trigger: 'blur' }
          ],
          buryingName: [
            { required: true, message: '请填写埋点名称', trigger: 'blur' }
          ],
          platform :[
            { required: true, message: '请选择平台属性', trigger: 'change' }
          ],
          pageClass :[
            { required: true, message: '请选择页面Class', trigger: 'change' }
          ],
        },
      operation: false, // true:新增, false:编辑
      dialogVisible:false,
      buryingConfig:{
        pageClassOption:'2'
      },
      editLoading:false,
      input2:'',
      reloadCheLoading:false,
      platform_options:[],
      pageClass_options:[
        {
          key:'1',
          value:'是'
        },
        {
          key:'2',
          value:'否'
        }
      ]
    };
  },
  methods: {
    // 搜索
    search() {
      this.loading = true;
      // this.queryBox.startDate = this.value2[0];
      // this.queryBox.endDate = this.value2[1];
      if(this.value2){
        this.queryBox.startDate = this.value2[0];
        this.queryBox.endDate = this.value2[1];
      }else{
        this.queryBox.startDate = '';
        this.queryBox.endDate = '';
      }
      this.pageRequest.pageNum = 1;
      this.findPage(null);
    },
    handleChange(value) {
      console.log(value);
    },
    // 获取分页数据
    findPage: function(data) {
      this.loading = true;
      if (data !== null) {
        this.loading = true;
        this.pageRequest = data.pageRequest;
      }
      this.queryBox.pageSize = this.pageRequest.pageSize;
      this.queryBox.pageNum = this.pageRequest.pageNum;
      this.$api.user.buryingConfigList(
          this.queryBox
      ).then(res=>{
          let content = { content: res.data, totalSize: res.total };
          this.pageResult = content;
          this.loading = false;
          this.pageResult.content.forEach(item => {
            this.platform_options.forEach(p=>{
              if(item.platform==p.key){
                item.platformStr=p.value
              }
            })
            item.isControlResource = JSON.stringify(item.isControlResource); 
          });
      })
    },

    reset(queryBox) {
      this.$refs.queryBox.resetFields();
      this.queryBox.startDate = "";
      this.queryBox.endDate = " ";
      this.queryBox.url=''
      this.queryBox.bid=''
      this.queryBox.buryName=''
      this.queryBox.bName=''
      this.queryBox.id=''
      this.queryBox.platform=''
      this.value2 = "";
      this.findPage(null);
    },
    // 新增
    handleAdd(){
      
      // 获取埋点ID
      this.$api.user.generateId().then(res=>{
        if(res.result==1){
          this.buryingConfig.id=res.data
          this.dialogVisible=true
        }else{
          this.$message({
            message: '获取埋点ID失败',
            type: "error"
          });
        }
      })
      this.getPlatForm()
    },
    getPlatForm(){
       // 获取平台属性
      this.$api.user.optionsList({codeType: "burying_platform"}).then(res=>{
        this.platform_options=res.keyValueList
      })
    },
    handleEdit(params){
      this.dialogVisible=true
      this.operation=true
      this.buryingConfig=params.row
    },
    handleDeleteDic(params){
      this.$confirm("确认删除吗？", "提示", {}).then(()=>{
        this.$api.user.buryingConfigupdeleteInfo({id:params.row.id}).then(res=>{
        if(res.result==2){
          this.$message({
              message: '删除成功！',
              type: "error"
            });
            this.editLoading=false
          }else{
            this.$message({
              message:res.msg,
              type: "success"
            });
            this.findPage(null)
          }
      })
      })
      
    },
    addBuryingConfig(buryingConfig){
      this.$refs[buryingConfig].validate((valid) => {
          if (valid) {
            if(this.buryingConfig.pageClassOption==1){
              this.$confirm('请再次确认所属页面字段是否与线上一致！', '提示',{
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning'
              }).then(()=>{
                this.editLoading=true
                this.$api.user.buryingConfigAddInfo(this.buryingConfig).then(res=>{
                  if(res.result==2){
                    this.$message({
                      message: res.msg,
                      type: "error"
                    });
                    this.editLoading=false
                  }else{
                    this.$message({
                      message: '添加成功！',
                      type: "success"
                    });
                    this.dialogVisible=false
                    this.editLoading=false
                    this.operation=false
                    this.buryingConfig={
                      pageClassOption:'2'
                    }
                    this.findPage(null)
                  }
                })
              })
            }else{
              this.$api.user.buryingConfigAddInfo(this.buryingConfig).then(res=>{
                  if(res.result==2){
                    this.$message({
                      message: res.msg,
                      type: "error"
                    });
                    this.editLoading=false
                  }else{
                    this.$message({
                      message: '添加成功！',
                      type: "success"
                    });
                    this.dialogVisible=false
                    this.editLoading=false
                    this.operation=false
                    this.buryingConfig={
                      pageClassOption:'2'
                    }
                    this.findPage(null)
                  }
                })
            }
          } else {
            this.editLoading=false
            return false;
          }
      });
    
    },
    eidtBuryingConfig(buryingConfig){
        this.$refs[buryingConfig].validate((valid) => {
          if (valid) {
            this.editLoading=true
            this.$api.user.buryingConfigupdateInfo(this.buryingConfig).then(res=>{
              if(res.result==2){
                this.$message({
                  message: res.msg,
                  type: "error"
                });
                this.editLoading=false
              }else{
                this.$message({
                  message: '添加成功！',
                  type: "success"
                });
                this.dialogVisible=false
                this.editLoading=false
                this.operation=false
                this.findPage(null)
                this.buryingConfig={
                  pageClassOption:'2'
                }
              }
            })
          } else {
            this.editLoading=false
            return false;
          }
      });
    },
    dialogClose(){
      this.dialogVisible=false
      this.buryingConfig={}
    },
    reloadCache(){
      this.reloadCheLoading=true
      this.$api.user.reloadCache().then(res=>{
        if(res.result==2){
          this.$message({
            message: res.msg,
            type: "error"
          });
          this.reloadCheLoading=false
        }else{
          this.$message({
            message: '加载成功！',
            type: "success"
          });
          this.reloadCheLoading=false
        }
      })
    },
    exportData(){
      this.queryBox.pageNum=''
      axios({
        method: "get",
        url: baseUrl + "/buryingConfig/export",
        params: this.queryBox
      }).then(res => {
        window.open(res.request.responseURL);
      });
    },
    buryingConfigDialogClose(){
      this.operation=false
      this.buryingConfig={
        pageClassOption:'2'
      }
    }
  },
  mounted() {
    this.getPlatForm()
  }
};
</script>
<style >
@import url("../../assets/queryBox.css");
</style>
<style lang="scss">
.buryingConfig{
  .el-form-item--small .el-form-item__content, .el-form-item--small .el-form-item__label{
    width: 100%;
    margin-left: 0;
  }
  .el-form-item__content{
    margin-left: 0!important;
  }
}
.schoolBoxCont {
  margin: 5px 5px;

  .schoolBoxContItem {
    margin-right: 10px;
    float: left;
    .el-form-item__content {
      display: flex;
      flex-direction: row;
    }
    .schoolBoxContItemTitle {
      background: #f5f7fa;
      width: 115px;
      border: 1px solid #dcdfe6;
      border-top-left-radius: 4px;
      border-bottom-left-radius: 4px;
      line-height: 39px;
      border-right: none;
    }
    .schoolBoxContItemInput {
      width: 150px;
      line-height: 39px;
      .el-date-editor.el-input,
      .el-date-editor.el-input__inner {
        width: 100%;
      }
    }
    .schoolBoxContItemInput2 {
      width: 350px;
      line-height: 39px;
      .el-date-editor.el-input,
      .el-date-editor.el-input__inner {
        width: 100%;
      }
    }
  }
}
.buryingConfigDialog{
  .el-row{
    .el-col{
      margin-left: 0!important;
    }
  } 
}
</style>

